{{define "role/edit.tmpl"}} {{template "app/header.tmpl" .}}
<script type="text/javascript" src="/public/statics/lib/loading/okLoading.js"></script>
</head>

<body>
    <div class="ok-body">
        <!--form表单-->
        <form class="layui-form ok-form" lay-filter="filter">
            <div class="layui-form-item">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-block">
                    <input type="hidden" name="id">
                    <input type="text" name="name" placeholder="角色名称" autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色备注</label>
                <div class="layui-input-block">
                    <input type="text" name="describe" placeholder="角色备注" autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色权限</label>
                <div class="layui-input-block">
                    <div id="permissionTree"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    {{template "app/footer.tmpl" .}}
    <script type="text/javascript">
        let initData = JSON.parse("{{.role}}");

        layui.use(["form", "tree", "layer", "jquery", "okUtils"], function() {
            let form = layui.form;
            let tree = layui.tree;
            let layer = layui.layer;
            let okUtils = layui.okUtils;
            let $ = layui.jquery;

            form.val("filter", initData);

            okUtils.ajax("/admin/permission/permissionRoleTree", "post", null, true).done(function(response) {

                var list = []

                initData.permission.forEach(element => {
                    list.push(element.id)
                });


                recursiveFunction(response.data, list)

                tree.render({
                    elem: '#permissionTree',
                    data: [{
                        "title": "根目录",
                        id: "0",
                        "spread": true,
                        "children": response.data
                    }],
                    showCheckbox: true,
                    strict: false,
                    id: 'permission',
                    isJump: true,
                    click: function(obj) {
                        var data = obj.data;
                        console.log(data);
                    }
                });
            }).fail(function(error) {
                layer.msg("网络错误", {
                    icon: 5
                })
            });


            function recursiveFunction(data, arr) {

                const getStr = function(list) {
                    list.forEach(function(row) {
                        if (row.children) {
                            getStr(row.children)
                        } else {

                            if ($.inArray(row.id, arr) != -1) {
                                row.checked = true

                            }

                        }
                    })
                }
                getStr(data)
            }

            okLoading.close($);
            form.on("submit(edit)", function(data) {
                // TODO 权限节点校验

                // 请求后台
                okUtils.ajax("/admin/role/edit", "PUT", data.field, true).done(function(response) {
                    if (response.code == 0) {
                        layer.msg(response.msg, {
                            icon: 1,
                            time: 1000
                        }, function() {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        })
                    } else {
                        layer.msg(response.msg, {
                            icon: 5
                        })
                    }

                }).fail(function(error) {
                    layer.msg("网络错误", {
                        icon: 5
                    })
                });
                return false;
            });
        })
    </script>


</body>

</html>
{{end}}